<template>
    <div>
        <div ref="income" style="width: 100%;height: 300px;"></div>
        <div v-if="detailVisible" :style="panelStyle">11111111111111</div>
    </div>
</template>

<script>
    /**
     select count(iscity),iscity from d left join u on d.id =u.userid and p='360se' group by u.iscity having
     count(iscity)>0
     */
    import echarts from 'echarts'

    export default {
        name: "income",
        data() {
            return {
                offsetX: '',
                offsetY: '',
                detailVisible: false,
                chart: null,
                iscityData:[{"income":"1001～1500元","count":97760},{"income":"12000元以上","count":14336},{"income":"1501～2000元","count":99228},{"income":"2001～3000元","count":286145},{"income":"3001～5000元","count":331577},{"income":"5001～8000元","count":146493},{"income":"500元及以下","count":63612},{"income":"501～1000元","count":52566},{"income":"8001～12000元","count":48075},{"income":"无收入","count":180549}]
            }
        },
        mounted() {
            this.chart = echarts.init(this.$refs.income);
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (val) {
                        return `${val.data.income}：${val.data.count / 1000}千次访问`
                    }
                },
                dataset: {
                    dimensions: ['income', 'count'],
                    source: this.iscityData
                },
                series: [
                    {
                        center: ['50%', '50%'],
                        radius: [0, '50%'],
                        type: 'pie',
                        encode: {
                            itemName: 'income',
                            value: 'count'
                        },
                        label: {
                            formatter: function (val) {
                                if (val.data.iscity == -1) {
                                    return `未知(${val.percent}%)`;
                                }
                                return `${val.data.income}(${val.percent}%)`
                            }
                        },
                    }
                ]
            };
            this.chart.setOption(option)
            let _this = this;
            this.chart.on('mouseover', function (e) {
                _this.offsetY = e.event.event.offsetY;
                _this.offsetX = e.event.event.offsetX;
                _this.detailVisible = true;
            });
            this.chart.on('mouseout', function (e) {
                _this.offsetY = e.event.event.offsetY;
                _this.offsetX = e.event.event.offsetX;
                _this.detailVisible = false;
            })
        },
        computed: {
            panelStyle() {
                return `width:500px;height:500px;position: fixed;left: 50%;top: ${this.offsetY}px; transform:translateX(-50%);border:2px solid yellow;`
            }

        },
    }
</script>

<style scoped>

</style>